<template>
    <div>
        <div class="gva-table-box">
        <el-tabs v-model="tabName">
            <el-tab-pane label="待我审批" name="owner_is_me">
                <div class="gva-table-box">
                    <LTable
                        :columns="columns"
                        :tableData="tableData"
                        :maxHeight="'calc(100vh - 226px)'"
                        :pages="pages"
                        @changePages="changePages"
                        @updateMultipleSelection="handleSelectionChange"
                        :searchArr="searchArr"
                        :isSearch="true"
                        @rowDblclick="row => openDetailDialog(row)"
                        @onSubmit="onSubmit"
                    >
                        <template #action>
                            <div class="gva-btn-list">
                                <el-button
                                    type="primary"
                                    :disabled="multipleSelection.length!=1"
                                    @click="openDetailDialog(multipleSelection.length==1&&multipleSelection[0])"
                                    >查看详情</el-button
                                >
                                <el-button
                                    type="success"
                                    :disabled="multipleSelection.length!=1"
                                    @click="openAgreeDialog(multipleSelection.length==1&&multipleSelection[0])"
                                    >通过</el-button
                                >
                                <el-button
                                    type="danger"
                                    :disabled="multipleSelection.length!=1"
                                    @click="openRefuseDialog(multipleSelection.length==1&&multipleSelection[0])"
                                    >驳回</el-button
                                >
                            </div>
                        </template>
                    </LTable>
                </div>
            </el-tab-pane>
            <el-tab-pane label="我提交的申请" name="submitter_is_me">
                <div class="gva-table-box">
                    <LTable
                        :columns="columns"
                        :tableData="applyTableData"
                        :maxHeight="'calc(100vh - 226px)'"
                        :pages="applyPages"
                        @changePages="changeApplyPages"
                        :searchArr="searchArr"
                        :isSearch="true"
                        @rowDblclick="row => openDetailDialog(row)"
                        @onSubmit="onApplySubmit"
                    >
                        <template #action>
                            <div class="gva-btn-list">
                                <el-button
                                    type="primary"
                                    :disabled="multipleSelection.length!=1"
                                    @click="openDetailDialog(multipleSelection.length==1&&multipleSelection[0])"
                                    >查看详情</el-button
                                >
                            </div>
                        </template>
                    </LTable>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
    <!-- 通过 -->
    <el-dialog
        v-if="agreeVisible"
        v-model="agreeVisible"
        destroy-on-close
        width="50%"
        title="通过"
    >
        <el-form
            ref="agreeFormRef"
            :model="agreeForm"
        >
            <el-row>
                <el-col :span="24">
                    <el-form-item label="通过原因：" style="width: 100%">
                        <textarea
                            v-model="agreeForm.comment"
                            :rows="5"
                            style="width: 100%"
                        />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="agreeSubmit"
                    >确定</el-button
                >
                <el-button
                    @click="
                        (agreeForm = {}),
                            (agreeVisible = false)
                    "
                    >取消</el-button
                >
            </div>
        </template>
    </el-dialog>

    <!-- 驳回 -->
    <el-dialog
            v-if="refuseVisible"
            v-model="refuseVisible"
            destroy-on-close
            width="50%"
            title="驳回"
        >
            <el-form
                ref="refuseFormRef"
                :model="refuseForm"
            >
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="驳回原因：" style="width: 100%">
                            <textarea
                                v-model="refuseForm.comment"
                                :rows="5"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="refuseSubmit"
                        >确定</el-button
                    >
                    <el-button
                        @click="
                            (refuseForm = {}),
                                (refuseVisible = false)
                        "
                        >取消</el-button
                    >
                </div>
            </template>
        </el-dialog>

        <!-- 查看提交详情 -->
    <el-dialog
            v-if="detailVisible"
            v-model="detailVisible"
            destroy-on-close
            width="80%"
            title="申请详情"
        >
            <el-form
                ref="detailFormRef"
                :model="refuseForm"
            >
                <el-row>
                    <el-col :span="24">
                        <iframe :src="detailForm.detail_url" style="width: 100%;height: 800px" />
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button
                        @click="
                            (detailForm = {}),
                                (detailVisible = false)
                        "
                        >确定</el-button
                    >
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {
    getWorkflowDataList,
    agreeApply,
    refuseApply
} from '@/api/workflow'

// 全量引入格式化工具 请按需保留
import {
    formatDate,
} from "@/utils/format";
import LTable from "@/components/LTable/LTable.vue";
// import searchForm from "@/components/searchForm/searchForm.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive, onMounted, watchEffect } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { useDict } from "@/utils/dictionary";
const dict = ref({});
const { t: il8n } = useI18n();

defineOptions({
    name: "wworkflow",
});
// 使用 useRoute 函数获取当前路由信息
const router = useRouter();

// 验证规则
const rule = reactive({});

const elFormRef = ref();
const elSearchFormRef = ref();

// =========== 表格控制部分 ===========

const tableData = ref([]);
const searchInfo = ref({});

const agreeVisible = ref(false);
const agreeForm = ref({});
const agreeFormRef = ref();

const refuseVisible = ref(false);
const refuseForm = ref({});
const refuseFormRef = ref();

const detailVisible = ref(false);
const detailForm = ref({});
const detailFormRef = ref();

const applyTableData = ref([]);

const tabName = ref("owner_is_me");

const pages = ref({
    page: 1,
    pageSize: 20,
    total: 0,
});

const applyPages = ref({
    page: 1,
    pageSize: 20,
    total: 0,
});


// ======查询数据======
const searchArr = ref([]);
// ======表格头部数据======
const columns = ref([]);

watchEffect(() => {

    const newSearchArr = [
        {
            prop: "title",
            show: true, // 通过 show 来控制列的展示或隐藏
            value: "",
            type: "input",
        },
        {
            prop: "application_info",
            show: true,
            value: "",
            type: "",
        }, 
        {
            prop: "createUser",
            show: true,
            value: "",
            type: "input",
        },
        {
            prop: "CreatedAt",
            label: il8n("createdAt.label"),
            show: true, // 通过 show 来控制列的展示或隐藏
            value: "",
            type: "datetimerange",
        }
    ];
    searchArr.value = [...newSearchArr];

    const newColumns = [
        {
            prop: "title",
            fixedWidth: 260,
            label: "审批名称",
            show: true, // 通过 show 来控制列的展示或隐藏
            filter: true,
            // slot: "firstOrderNum",
            tableColumnProps: {
                fixed: "left",
            },
        },
        {
            prop: "application_info",
            label: "申请信息",
            show: true,
        },
        {
            prop: "createUser",
            label: "申请人",
            show: true
        },
        {
            prop: "CreatedAt",
            label: "申请时间",
            show: true,
        },
        
    ];
    columns.value = [...newColumns];
});

// 搜索
const onSubmit = (val) => {
    searchInfo.value = {
        ...val,
    };
    pages.value.page = 1;
    pages.value.pageSize = 20;
    getTableData();
};

const onApplySubmit = (val) => {
    searchInfo.value = {
        ...val,
    };
    applyPages.value.page = 1;
    applyPages.value.pageSize = 20;
    getTableData();
};


// 查询
const getTableData = async (tabNameValue) => {
    const params = {
        ...pages.value,
        ...searchInfo.value,
    }
    if (tabNameValue) {
        params[tabNameValue] = true
    }
    else params[tabName.value] = true
    // 查询
    console.log("params====================")
    const res = await getWorkflowDataList(params)
    if (res.code === 0) {
        if (tabNameValue) {
            applyTableData.value = res.data.list.map(item=>{
                item.CreatedAt = item.CreatedAt ? formatDate(item.CreatedAt,'yyyy-MM-dd hh:mm:ss') : "";
                return item
            })
        }
        else { 
            if (tabName.value === 'owner_is_me') {
                tableData.value = res.data.list.map(item=>{
                item.CreatedAt = item.CreatedAt ? formatDate(item.CreatedAt,'yyyy-MM-dd hh:mm:ss') : "";
                return item
            })
            } else {
                applyTableData.value = res.data.list.map(item=>{
                item.CreatedAt = item.CreatedAt ? formatDate(item.CreatedAt,'yyyy-MM-dd hh:mm:ss') : "";
                return item
            })
            }
        }  
    }
};



// ============== 表格控制部分结束 ===============

// 多选数据
const multipleSelection = ref([]);
// 多选
const handleSelectionChange = (val) => {
    multipleSelection.value = val;
};


// 打开弹窗
const openAgreeDialog = (row) => {
    agreeForm.value = {
        workflow_data_id: row.ID
    };
    agreeVisible.value = true;
};

const openRefuseDialog = (row) => {
    refuseForm.value = {
        workflow_data_id: row.ID
    };
    refuseVisible.value = true;
};

const openDetailDialog = (row) => {
    // 打开弹窗
    detailForm.value = { ...row }
    detailVisible.value = true;
};

onMounted(async () => {
    // 待我审批
    getTableData();
     // 我提交的申请
    getTableData('submitter_is_me')
});


function changePages(currentPages) {
    pages.value = {
        ...pages.value,
        ...currentPages,
    };
    getTableData();
}

function changeApplyPages(currentPages) {
    applyPages.value = {
        ...applyPages.value,
        ...currentPages,
    };
    getTableData();
}


function agreeSubmit() {
    agreeFormRef.value.validate(async (valid) => {
        if (valid) {
            const res = await agreeApply(agreeForm.value);
            if (res.code === 0) {
                ElMessage({
                    type: "success",
                    message: "通过申请成功",
                });
                agreeVisible.value = false;
                getTableData();
            }
        }
    });
}

function refuseSubmit() {
    refuseFormRef.value.validate(async (valid) => {
        if (valid) {
            const res = await refuseApply(refuseForm.value);
            if (res.code === 0) {
                ElMessage({
                    type: "success",
                    message: "驳回申请成功",
                });
                refuseVisible.value = false;
                getTableData();
            }
        }
    })
}


</script>

<style lang="scss" scoped>
@import url("@/style/common/common.scss");
</style>
